{% extends "header.html" %}
{% load  web_tag %}
{% block conten %}

<style>
 #top_control a {width:80px;float:right;margin-right: 10px;margin-top: 0px;color:#3c8dbc;}
 #top_control a 
 </style>
 
  {% if permission.vmware_manage%}
 <div style="margin-bottom: 15px;margin-top: -45px;" id="top_control">
 
<a href="/vMware/customization/" class="btn btn-block btn-default btn-flat">命名规则</a>
<a href="/vMware/resource/" class="btn btn-block btn-default btn-flat">资源位置</a>
<a href="/vMware/ippool/" class="btn btn-block btn-default btn-flat">IP地址池</a>
<a href="/vMware/network/" class="btn btn-block btn-default btn-flat">网络设置</a>
<a href="/vMware/vCenter/" class="btn btn-block btn-default btn-flat">vC设置</a>
<a href="/vMware/message/" class="btn btn-block btn-default btn-flat">通知设置</a>
<a href="/vMware/bulletin/" class="btn btn-block btn-default btn-flat">公告</a>

<div style="clear:both"></div>
</div>
   {% endif %}


<style>
#task table td {line-height:50px;}
</style>

<script type="text/javascript">
	function Change(){
		var node = $("#node").val();
		$.ajax({
			url:"/vMware/Ajax/"+node+"/nodedata/",
			type:"POST",
			success:function(arg){
				var arg = JSON.parse(arg)
				$("#datastore").empty();
				$("<option>请选择存储位置</option>").appendTo($("#datastore"));
				for(x in arg){
					a = arg[x][2]/1024/1024/1024
					$("<option value='"+arg[x][0]+"'>"+arg[x][1]+" &nbsp;&nbsp;可用："+a.toFixed(2)+"G</option>").appendTo($("#datastore"));
				}
			}
		})
	}
</script>

<script type="text/javascript">
function test(id){
	document.getElementById("reject_form").action = '/vMware/order/reject/'+ id +'/'
}
</script>

<script type="text/javascript">
function ippool(id){
	document.getElementById("ippools").action = '/vMware/order/opened/'+ id +'/'
}
</script>

<!-- DataTables -->
  <link rel="stylesheet" href="/static/plugins/datatables/dataTables.bootstrap.css">

<div class="row">
	<div class="col-md-3">
     <div class="box box-success">
       <div class="box-header with-border">
         <h3 class="box-title">资源域</h3>
         <span class="label label-success pull-right">Resource</span>
       </div><!-- /.box-header -->
       <div class="box-body" style="height: 100px;">
       	<div>
         	<span style="font-size:30px;color:#428bca;margin-left: 10px;">{% if resources %}{{resources}}{% else %} 暂无{%endif%}</span>
         </div>
       </div><!-- /.box-body -->
     </div><!-- /.box -->
   </div><!-- /.col -->
   
   
   <div class="col-md-3">
     <div class="box box-success">
       <div class="box-header with-border">
         <h3 class="box-title">待开通虚拟机</h3>
         <span class="label label-success pull-right">Virtual</span>
       </div><!-- /.box-header -->
       <div class="box-body" style="height: 100px;">
       	<div>
         	<span style="font-size:30px;color:#428bca;margin-left: 10px;">
         	{% if wait_start %}{{wait_start}}{% else %}0{% endif %}
         	</span>
         </div>
         <div style="margin-top: 10px;float: right;margin-right: 10px;"><span>台</span></div>
       </div><!-- /.box-body -->
     </div><!-- /.box -->
   </div><!-- /.col -->
   
   <div class="col-md-3">
     <div class="box box-success">
       <div class="box-header with-border">
         <h3 class="box-title">已交付虚拟机</h3>
         <span class="label label-success pull-right">Pay</span>
       </div><!-- /.box-header -->
       <div class="box-body" style="height: 100px;">
       	<div>
         	<span style="font-size:30px;color:#428bca;margin-left: 10px;"><a href="/vMware/order/over/">{% if over %}{{over}}{% else %}0{% endif %}</a></span>
         </div>
         <div style="margin-top: 10px;float: right;margin-right: 10px;"><span>/月</span></div>
       </div><!-- /.box-body -->
     </div><!-- /.box -->
   </div><!-- /.col -->
   
   <div class="col-md-3">
     <div class="box box-success">
       <div class="box-header with-border">
         <h3 class="box-title">机型</h3>
         <span class="label label-success pull-right">Type</span>
       </div><!-- /.box-header -->
       <div class="box-body" style="height: 100px;">
       	<div>
         	<span style="font-size:30px;color:#428bca;margin-left: 10px;"><a href="/vMware/virtual_type/">{% if type %}{{type}}{% else %}0{% endif %}</a></span>
         </div>
         <div style="margin-top: 10px;float: right;margin-right: 10px;"><span>个</span></div>
       </div><!-- /.box-body -->
     </div><!-- /.box -->
   </div><!-- /.col -->
   
</div>



<div class="box" style="border-top: 0px;">
  <div class="box-header">
    <h3 class="box-title">新增虚拟机任务</h3>
  </div>
  <!-- /.box-header -->
  <div class="box-body" id="task">
    <table id="example1" class="table table-bordered table-striped">
      <thead>
      <tr>
        <th>申请人</th>
        <th>申请时间</th>
        <th>模板</th>
        <th>配置</th>
        <th>数量</th>
        <th>项目</th>
        <th>位置</th>
        <th>进度</th>
        <th>开通模式</th>
        <th>操作 </th>
      </tr>
      </thead>
      <tbody>
       
      {% for order in orders %}
      <tr>
        <td>{{order.uid.name}}</td>
        <td>{% minute_convert order.applytime %}</td>
        <td>{{order.template.type_name}} &nbsp;({{order.template.template.name}})</td>
        <td>{{order.template.template.Core}}Core/{{order.template.template.memory}}G</td>
        <td>{{order.num}} 台</td>
        <td>{{order.project}}</td>
        <td>{{order.resource.name}}</td>
        <td>{% OrderStatus order.status %}</td>
        <td>{% Resourcestatus order.resource.type %}</td>
        <td>
        	
        	{% if order.status == 0 %}
        		<a class="btn btn-success" href="/vMware/order/{{order.id}}/">审核</a>
        		<button class="btn btn-info"  data-toggle="modal" data-target="#myModal2" onClick="test({{order.id}})">驳回 </button>
        	{% elif order.status == 1 %}
        		<button class="btn btn-success"  data-toggle="modal" data-target="#myModal" onClick="ippool({{order.id}})">开通</button>
        		<button class="btn btn-info"  data-toggle="modal" data-target="#myModal2" onClick="test({{order.id}})">驳回 </button>
        	{% elif order.status > 1 and order.status < 6 %}
        		{% if order.resource.type == 0 %}
        			<div class="progress progress-xs" style="width: 110px;float: left;margin-right: 4px;margin-top: 13px;height: 10px;">
		              <div class="progress-bar progress-bar-danger" style="width: {% OrderSchedule order.status %}%"></div>
		            </div>
		            <a class="btn btn-success" href="/vMware/order/detail/{{order.id}}/" {% if order.status > 2 and order.status < 8 %} style="float:left;" {% endif %} ><i class="halflings-icon white fa fa-fw fa-reorder"></i></a>
        		{% elif order.resource.type == 1 %}
        			<a class="btn btn-success" href="/vMware/order/pay/{{order.id}}/">交付</a>
        			<a class="btn btn-success" href="/vMware/order/detail/{{order.id}}/" ><i class="halflings-icon white fa fa-fw fa-reorder"></i></a>
        		{% endif %}
            {% elif order.status == 6 %}
        		<a class="btn btn-success" href="/vMware/order/pay/{{order.id}}/">交付</a>
        		<a class="btn btn-success" href="/vMware/order/detail/{{order.id}}/" ><i class="halflings-icon white fa fa-fw fa-reorder"></i></a>
        	{% elif order.status == 7 %}
        	<span>生成配置中......</span>
        	{% endif %}

        </td>
        </tr>
       {% endfor %}
      
      </tbody>
    </table>
  </div>
  <!-- /.box-body -->
</div>

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content" style="margin-top: 100px;">
         <form action="" method="post" id="ippools">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span></button>
             <h4 class="modal-title">选择IP地址池</h4>
           </div>
           <div class="modal-body">
             <p>
				<label>IP地址池</label>
				<select id="ippools" name="ippools" style="width: 100%;" class="form-control select2">
					<option>请选择IP地址池</option>
					{% for pool in ippools%}
						<option value="{{pool.id}}" >{{pool.alia}}({{pool.pooladd}}.{{pool.start}}--{{pool.end}})</option>
					{% endfor %}
				</select>
             </p>
           </div>
           <div class="modal-footer">
           <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
           <button type="submit" class="btn btn-primary">确定</button>
         </div>
         </form>
           </div>
       </div>
          
</div>


<div class="modal fade" id="myModal2">
          <div class="modal-dialog">
            <div class="modal-content" style="margin-top: 100px;">
            <form action="" method="post" id="reject_form">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span></button>
                 
                <h4 class="modal-title">驳回理由</h4>
              </div>
              <div class="modal-body">
               <textarea name="remark" id="remark" style="width: 568px;height: 123px;"  placeholder="你为毛线拒绝人家....."></textarea>
              </div>
              <div class="modal-footer">
              <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">确定</button>
            </div>
            </form>
              </div>
          </div>
          
</div>

<!-- DataTables -->
<script src="/static/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/static/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- page script -->



<!-- Select2 -->
<script src="/static/plugins/select2/select2.full.min.js"></script>
<!-- InputMask -->
<script src="/static/plugins/input-mask/jquery.inputmask.js"></script>
<script src="/static/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="/static/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<!-- date-range-picker -->
<script src="/static/js/moment.min.js"></script>
<script src="/static/plugins/daterangepicker/daterangepicker.js"></script>
<!-- bootstrap color picker -->
<script src="/static/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<!-- bootstrap time picker -->
<script src="/static/plugins/timepicker/bootstrap-timepicker.min.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="/static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- iCheck 1.0.1 -->
<script src="/static/plugins/iCheck/icheck.min.js"></script>
<!-- FastClick -->
<script src="/static/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/dist/js/demo.js"></script>
<!-- Page script -->

<script>
  $(function () {
    //Initialize Select2 Elements
    $(".select2").select2();

    //Datemask dd/mm/yyyy
    $("#datemask").inputmask("dd/mm/yyyy", {"placeholder": "dd/mm/yyyy"});
    //Datemask2 mm/dd/yyyy
    $("#datemask2").inputmask("mm/dd/yyyy", {"placeholder": "mm/dd/yyyy"});
    //Money Euro
    $("[data-mask]").inputmask();

    //Date range picker
    $('#reservation').daterangepicker();
    //Date range picker with time picker
    $('#reservationtime').daterangepicker({timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A'});
    //Date range as a button
    $('#daterange-btn').daterangepicker(
        {
          ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          },
          startDate: moment().subtract(29, 'days'),
          endDate: moment()
        },
        function (start, end) {
          $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        }
    );

    //iCheck for checkbox and radio inputs
    $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
      checkboxClass: 'icheckbox_minimal-blue',
      radioClass: 'iradio_minimal-blue'
    });
    //Red color scheme for iCheck
    $('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
      checkboxClass: 'icheckbox_minimal-red',
      radioClass: 'iradio_minimal-red'
    });
    //Flat red color scheme for iCheck
    $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
      checkboxClass: 'icheckbox_flat-green',
      radioClass: 'iradio_flat-green'
    });

    //Colorpicker
    $(".my-colorpicker1").colorpicker();
    //color picker with addon
    $(".my-colorpicker2").colorpicker();

    //Timepicker
    $(".timepicker").timepicker({
      showInputs: false
    });
  });
</script>







<script>
  $(function () {
    $("#example1").DataTable();
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false
    });
  });
</script>


{% endblock %}